.sign-in-night{
    .header{
        margin: .09rem .104rem;
        border: 1px solid whitesmoke;
        height: .583rem;
        -moz-box-shadow:0 2px 5px #333333;
        -webkit-box-shadow:0 2px 5px #333333;
        box-shadow:0 2px 5px #aaa;

        p {
            margin: 0;
            color: #666;
            font-size: .16rem;
            line-height: 1em;
        }
        p:first-child{
           margin-bottom: .05rem;
        }
        p:last-child{
            margin-top: .05rem;
        }

        .signed{
            color: #2cc57b;
        }
        .shouldSign{
            color: #222;
        }
        .miss{
            color: #dc7676;
        }
    }

    .body{
        position: relative;
        margin-top: 1rem;
        width: 100%;

        .sign-in-title{
            margin-bottom: .5rem;
            font-size: .18rem;
            font-weight: bold;
            color: #222;
        }

        .time{
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            height: 1%;
            margin: auto;
            font-size: .5rem;
            color: #dc7676;
        }

        button{
            margin-top: .8rem;
            border-radius: .3rem;
            width: 1.35rem;
            height: .478rem;
            font-size: .2rem;
        }

        .cancel{
            //position: fixed;
            //bottom: .16rem;
            display: inline-block;
            width: 100%;
            text-align: right;
            margin-top: .4rem;
            padding-right: .23rem;
            font-size: .18rem;
            color: #666;
        }

        .clock-wrapper{
            position: relative;
            margin-top: -.2rem;
            .clock{
                width: 1.78rem;
            }
            .pointer{
                position: absolute;
                height: .937rem;
                margin: auto;
                left: 0;
                right: 0;
                top: .59rem;
                transform-origin: center .736rem;
            }

            .circle{
                position: absolute;
                height: 1.51rem;
                margin: auto;
                left: 0;
                right: 0;
                top: .15rem;
                bottom: 0;
            }
        }

        .circle-progress{
            position: absolute;
            top: .15rem;
            right: 0;
            left: 0;
            bottom: 0;
            margin: auto;
            width: 1.54rem;
            height: 1.54rem;
            border:1px solid  transparent;

            @media screen and (max-width: 320px) {
                width: 1.5rem;
                height: 1.5rem;
            }

            @media screen and (min-width: 1024px){
                top: .19rem;
            }

            .wrapper{
                position: absolute;
                top:0;
                /*这个很重要*/
                overflow: hidden;
                width: 50%;
                height: 1.54rem;
            }
            .right{
                right:0;
            }
            .left{
                left:0;
            }

            .progress{
                position: absolute;
                top:0;
                box-sizing: border-box;
                border: .04rem solid transparent;
                border-radius: 99%;
                width: 1.54rem;
                height: 1.54rem;


                @media screen and (max-width: 320px) {
                    width: 1.5rem;
                    height: 1.5rem;
                }
            }

            //先走右,再走左
            .right-circle{
                right:0;
                border-top: .04rem solid #2bc779;
                border-right: .04rem solid #2bc779;
                -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
                //-webkit-animation: 4s right-circle-run linear forwards ;
                //animation: 4s right-circle-run linear infinite;
            }
            .left-circle{
                left:0;
                border-bottom: .04rem solid #2bc779;
                border-left: .04rem solid #2bc779;
                -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
                //-webkit-animation: 4s left-circle-run linear forwards ;
                //animation: 4s left-circle-run linear infinite;
            }
        }

        @-webkit-keyframes right-circle-run {
            from{
                -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
            }
            50%{
                -webkit-transform: rotate(225deg);
                transform: rotate(225deg);
            }
            to{
                -webkit-transform: rotate(225deg);
                transform: rotate(225deg);
            }
        }


        @-webkit-keyframes left-circle-run {
            from{
                -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
            }
            50%{
                -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
            }
            to{
                -webkit-transform: rotate(225deg);
                transform: rotate(225deg);
            }
        }

    }
}
